<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- 头部盒子 -->
    <header>
        <h1>四公司人资系统数据可视化-ECharts</h1>
        <div class="showTime">时间</div>
    </header>
    <section class="mainbox">
        <div class="column">
            <div class="panel bar">
                <h2>柱形图-职工类型</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel bar">
                <h2>折线图-人员变化</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel bar">
                <h2>饼状图-年龄分布</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

        </div>
        <div class="column">
            <!-- on模块制作 -->
            <div class="on">
                <div class="on-hd">
                    <ul>
                        <li>125811</li>
                        <li>100000</li>
                    </ul>
                </div>
                <div class="on-bd">
                    <ul>
                        <li>职工数</li>
                        <li>平均工资</li>
                    </ul>
                </div>
            </div>
            
        </div>
        <div class="column">
            <div class="panel bar">
                <h2>柱形图-汇款进度</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel bar">
                <h2>折线图-xx项目人员</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel bar">
                <h2>饼状图-设备分布</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>





    <script src="./js/flexible.js"></script>
    <script src="./js/showTime.js"></script>
</body>

</html>